<template>
  <div class="box">
    <header class="header">
      <div class="a1">
        <img src="/static/imgs_s10/S_10order1.08.png" alt />
        <div></div>
        <span>请输入商品名称</span>
      </div>
      <div class="a2">
        <span>搜索</span>
      </div>
    </header>
    <section>
      <ul class="ul1">
        <li>全部</li>
        <li>烧烤轰趴</li>
        <li>小龙虾</li>
        <li class="li4">
          <p></p>
          <span>家常菜</span>
          <div>4</div>
        </li>
        <li>海鲜系列</li>
        <li>精美凉菜</li>
      </ul>
      <ul class="ul2">
        <li class="li1">家常菜</li>
        <li class="li2">
          <img src="/static/imgs_s10/S_10order1.01.png" alt />
          <div class="b1">
            <p class="p1">
              <span>特价</span>
            </p>
            <p class="p2">内蒙古烤羊肉串</p>
            <p class="p3">月售48</p>
            <p class="p4">原价:¥48.00/份</p>
            <p class="p5">¥36.00/份</p>
          </div>
          <div class="b2">
            <img class="img1" src="/static/imgs_s10/S_10order1.07.png" alt />
            <span class="span1"></span>
            <span class="span2">1</span>
            <img class="img2" src="/static/imgs_s10/S_10order1.09.png" alt />
            <span class="span3"></span>
          </div>
        </li>
        <li class="li3">
          <img src="/static/imgs_s10/S_10order1.02.png" alt />
          <div class="b3">
            <p class="p1">
              <span>特价</span>
            </p>
            <p class="p2">长沙臭豆腐</p>
            <p class="p3">月售48</p>
            <p class="p3">原价:¥48.00/份</p>
            <p class="p5">¥12.00/份</p>
          </div>
          <div class="b4">
            <img class="img1" src="/static/imgs_s10/S_10order1.07.png" alt />
            <span class="span1"></span>
            <span class="span2">2</span>
            <img class="img2" src="/static/imgs_s10/S_10order1.09.png" alt />
            <span class="span3"></span>
          </div>
        </li>
        <li class="li4">
          <img src="/static/imgs_s10/S_10order1.03.png" alt />
          <div class="b5">
            <p class="p2">关东煮串串香</p>
            <p class="p3">月售48</p>
            <p class="p5">¥9.90/份</p>
          </div>
          <div class="b6">
            <img class="img1" src="/static/imgs_s10/S_10order1.07.png" alt />
            <span class="span1"></span>
            <span class="span2">2</span>
            <img class="img2" src="/static/imgs_s10/S_10order1.09.png" alt />
            <span class="span3"></span>
          </div>
        </li>
        <li class="li5">
          <img src="/static/imgs_s10/S_10order1.04.png" alt />
          <div class="b7">
            <p class="p2">老北京烤鸭</p>
            <p class="p3">月售48</p>
            <p class="p5">¥68.00/份</p>
          </div>
          <div class="b8">
            <img class="img2" src="/static/imgs_s10/S_10order1.09.png" alt />
            <span class="span3"></span>
          </div>
        </li>
        <li class="li6">
          <img src="/static/imgs_s10/S_10order1.05.png" alt />
          <div class="b9">
            <p class="p2">道口烧鸡</p>
            <p class="p3">月售48</p>
            <p class="p5">¥38.00/份</p>
          </div>
          <div class="b10">
            <img class="img1" src="/static/imgs_s10/S_10order1.07.png" alt />
            <span class="span1"></span>
            <span class="span2">1</span>
            <img class="img2" src="/static/imgs_s10/S_10order1.09.png" alt />
            <span class="span3"></span>
          </div>
        </li>
      </ul>
    </section>
    <footer>
      <img
        class="footer-imgs1"
        id="imgs"
        src="/static/imgs_s10/S_10order1.06.png"
        @click="openCart()"
        alt
      />
      <span class="span-1">{{cartList.length}}</span>
      <div class="div1">
        <span class="span1">合计</span>
        <span class="span2">￥0</span>
      </div>
      <div class="div2">选好了</div>
    </footer>

    <!-- 购物车页面 -->

    <!-- 蒙版 -->

    <div v-if="cartState == true">
      <div class="mask" id="mask" @click="closeCart()"></div>
      <div class="noCart" v-if="noCartState == true">
        <div class="img">
          <img src="/static/imgs_s07/s07_box.png" alt="显示错误" class="img1" />
        </div>
        <div class="text1">
          <p>您的购物车是空的！</p>
        </div>
        <div class="text2">
          <p>快去添加商品吧</p>
        </div>
      </div>

      <div class="cart" id="cart" v-if="noCartState == false">
        <div class="c">
          <div class="c1">
            <div @click="selectAll()">
              <img
                class="c1-imgs1"
                src="/static/imgs_s10/S_10order2.03.png"
                alt
                v-if="allChecked == true"
              />
              <img
                class="c1-imgs1"
                src="/static/imgs_s10/S_10order2.02.png"
                alt
                v-if="allChecked == false"
              />
              <!-- <input type="checkbox" class="ws-checkbox" v-model="allChecked" /> -->
            </div>

            <span class="c1-span1">全选</span>
            <span class="c1-span2">(已选{{cartList.length}}种)</span>
            <img class="c1-imgs2" src="/static/imgs_s10/S_10order2.01.png" alt />
            <span
              class="c1-span3"
              @click="deleteAll(cartList[0].member_id,cartList[0].shop_id)"
            >清空购物车</span>
          </div>

          <div
            class="c2"
            v-for="(product,index) in cartList"
            :key="index"
            v-if="product.quantity!=0"
          >
            <img
              class="c2-imgs1"
              @click="select(index)"
              src="/static/imgs_s10/S_10order2.03.png"
              alt
              v-if="product.state == true  "
            />
            <img
              class="c2-imgs1"
              @click="select(index)"
              src="/static/imgs_s10/S_10order2.02.png"
              alt
              v-if="product.state == false "
            />

            <img class="c2-imgs2" :src="product.product_pic" alt />
            <div class="c2-div1">
              <span class="c2-span1">{{product.product_name}}</span>
              <br />
              <span class="c2-span2">¥{{product.price}}</span>
            </div>
            <div class="c2-div2">
              <span class="c2-div2-span1" @click="onDec(index)"></span>
              <span class="c2-div2-span2"></span>

              <span class="c2-div2-span3">{{product.quantity}}</span>
              <span class="c2-div2-span4" @click="onInc(index)"></span>
              <span class="c2-div2-span5"></span>
              <span class="c2-div2-span6"></span>
            </div>
          </div>
        </div>
        <div class="d">
          <span class="d-span1">合计：</span>
          <span class="d-span2">￥{{total}}</span>

          <span class="d-span3">结算</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartList: [], //购物车列表
      total: 0, //总价
      allChecked: false, //是否全选
      cartState: false, //是否打开购物车界面
      displayMoney: false,
      noCartState: false
    };
  },

  methods: {
    //打开购物车
    openCart() {
      console.log(this.cartState);
      if (this.cartState == false) {
        this.cartState = true;
        this.allChecked = false; //加载页面时默认取消全选
        this.total = 0; //加载页面时默认总价清零

        this.getAll();
      } else {
        this.cartState = false;
      }
    },
    closeCart() {
      this.cartState = false;
    },
    selectAll() {
      //全选
      if (this.allChecked == false) {
        for (var i = 0; i < this.cartList.length; i++) {
          var item = this.cartList[i];

          item.state = true;

          console.log(item.state);
        }
      } else {
        //取消全选
        for (var i = 0; i < this.cartList.length; i++) {
          var item = this.cartList[i];
          item.state = false;
          console.log(item.state);
        }
      }
      this.allChecked = !this.allChecked;

      console.log(this.allChecked);
      this.getTotalPrice();
    },
    //单选
    select(i) {
      this.allChecked = false;
      console.log(this.allChecked);

      if (this.cartList[i].state) {
        this.cartList[i].state = false;

        console.log(this.cartList[i].state);
      } else {
        this.cartList[i].state = true;
        console.log(this.cartList[i].state);
      }

      this.getTotalPrice();
    },

    //减号
    onDec(ind) {
      if (this.cartList[ind].quantity > 0) {
        this.cartList[ind].quantity--;
      } else {
        this.cartList[ind].quantity = 0;
      }
      this.getTotalPrice();
      this.subtractCart(this.cartList[ind]);
    },

    //计算总价
    getTotalPrice() {
      var cartList = this.cartList; // // 获取购物车列表
      var total = 0;
      for (var i = 0; i < cartList.length; i++) {
        if (cartList[i].state) {
          total += cartList[i].price * cartList[i].quantity;
          //console.log(total);
        }
      }

      this.total = total.toFixed(2);
    },

    //加号
    onInc(ind) {
      this.cartList[ind].quantity++;
      this.getTotalPrice();
      this.addCart(this.cartList[ind]);
    },

    //添加购物车
    addCart(cart) {
      console.log(cart);
      wx.request({
        url: "http://localhost:2221/cart/addCart", //开发者服务器接口地址",
        data: cart, //请求的参数",
        method: "Post",
        dataType: "json", //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: res => {
          console.log(res);
        },
        fail: () => {},
        complete: () => {}
      });
    },
    //减购物车数量
    subtractCart(cart) {
      console.log(cart);
      wx.request({
        url: "http://localhost:2221/cart/subtractCart", //开发者服务器接口地址",
        data: cart, //请求的参数",
        method: "Post",
        dataType: "json", //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: data => {
          this.getAll();
        },
        fail: () => {},
        complete: () => {}
      });
    },
    //清空购物车
    deleteAll(member_id, shop_id) {
      console.log(member_id, shop_id);
      wx.request({
        url:
          "http://localhost:2221/cart/deleteAll?member_id=" +
          member_id +
          "&shop_id=" +
          shop_id, //开发者服务器接口地址",
        // data: member_id,shop_id, //请求的参数",
        method: "Get",
        dataType: "json", //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: data => {
          if (data.statusCode == 200) {
            this.getAll();
            //this.aggregate = data.data.aggregate;  后台传来的总价，暂时不用
          }
        },
        fail: () => {},
        complete: () => {}
      });
    },
    getAll() {
      let url = "http://localhost:2221/cart/list?member_id=1&shop_id=1";
      wx.request({
        url, //开发者服务器接口地址",
        //data: 'data', //请求的参数",
        method: "GET",
        dataType: "json", //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: data => {
          if (data.statusCode == 200) {
            console.log(data.data);
            this.cartList = data.data.cartLists;
            if (this.cartList.length == 0) {
              this.noCartState = true;
            } else {
              this.noCartState = false;
            }
            //this.aggregate = data.data.aggregate;  后台传来的总价，暂时不用
            console.log(this.cartList.length);
          }
        },
        fail: err => {
          console.log(err);
        }
      });
    }
  },

  created() {
    // let app = getApp()
  },
  onShow() {
    this.cartState = false; //加载页面时默认关闭购物车界面
    this.getAll();
  }
};
</script>



<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
  background: rgba(247, 247, 247, 1);
}

/* 顶部区块 */
.header {
  position: absolute;
  left: 0;
  height: 0;
  display: flex;
  align-items: center;
  width: 375px;
  height: 48px;
  background: rgba(255, 255, 255, 1);
}

.header .a1 {
  margin-left: 17px;
  width: 299px;
  height: 33px;
  background: rgba(247, 247, 247, 1);
  border-radius: 17px;
  display: flex;
  align-items: center;
}

.header .a2 {
  margin-left: 15px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
}

.header .a1 img {
  margin-left: 12px;
  width: 12px;
  height: 12px;
}

.header .a1 div {
  margin-left: 13px;
  width: 2px;
  height: 13px;
  background: rgba(50, 177, 108, 1);
  border-radius: 1px;
}

.header .a1 span {
  margin-left: 4px;
  width: 97px;
  height: 12px;
  line-height: 12px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(158, 158, 158, 1);
}

/* 中间区块左部分 */
section .ul1 {
  position: absolute;
  left: 0;
  top: 48px;
}

section .ul1 li {
  position: absolute;
  left: 14px;
  width: 88px;
  height: 12px;
  font-size: 13px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}

.ul1 li:nth-child(1) {
  top: 22px;
}

.ul1 li:nth-child(2) {
  top: 72px;
}

.ul1 li:nth-child(3) {
  top: 122px;
}

.ul1 li:nth-child(4) {
  left: 0px;
  top: 160px;
  width: 88px;
  height: 39px;
  background: rgba(255, 255, 255, 1);
  font-size: 13px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}

.ul1 li:nth-child(4) p {
  position: absolute;
  left: 0;
  top: 14px;
  width: 3px;
  height: 13px;
  background: rgba(50, 177, 108, 1);
}

.ul1 li:nth-child(4) span {
  position: absolute;
  left: 15px;
  top: 10px;
}

.ul1 li:nth-child(4) div {
  position: absolute;
  left: 55px;
  top: 4px;
  width: 17px;
  height: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(241, 145, 73, 1);
  border-radius: 50%;
}

.ul1 li:nth-child(5) {
  top: 220px;
}

.ul1 li:nth-child(6) {
  top: 270px;
}

/* 中右 */
section .ul2 {
  position: absolute;
  left: 79px;
  top: 48px;
  width: 296px;
  height: 595px;
  background: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
}

section .ul2 li {
  display: flex;
  flex-direction: row;
  margin-top: 17px;
  width: 296px;
  height: 85px;
}

section .ul2 .li1 {
  width: 286px;
  height: 12px;
  margin-top: 14px;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 10px;
}

section .ul2 li img {
  margin-left: 10px;
  margin-right: 10px;
  width: 85px;
  height: 85px;
}

/* 图右 */
section .ul2 li .p1 {
  width: 30px;
  height: 13px;
  background: rgba(228, 41, 56, 1);
  border-radius: 3px;
  text-align: center;
  line-height: 13px;
  font-size: 9px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
section .ul2 li .p2 {
  width: 100px;
  height: 12px;
  font-size: 13px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}

section .ul2 li .p3 {
  width: 40pxpx;
  height: 10px;
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}

.p4 {
  width: 72px;
  height: 11px;
  font-size: 10px;
  font-weight: 400;
  text-decoration: line-through;
  color: rgba(163, 165, 168, 1);
}

.p4 {
  margin-top: 6px;
  width: 100px;
  height: 14px;
  font-size: 13px;
  font-weight: bold;
  color: rgba(232, 91, 77, 1);
}

.b1 .p2,
.b3 .p2 {
  margin-top: 8px;
}

.b5 .p2,
.b7 .p2,
.b9 .p2 {
  margin-top: 5px;
}

.b1 .p3,
.b3 .p3 {
  margin-top: 5px;
}

.b5 .p3,
.b7 .p3,
.b9 .p3 {
  margin-top: 11px;
}

.b1 .p5,
.b3 .p5 {
  margin-top: 5px;
}

.b5 .p5,
.b7 .p5,
.b9 .p5 {
  margin-top: 28px;
}

.b2,
.b4,
.b6,
.b8,
.b10 {
  position: relative;
  margin-left: 20px;
  margin-top: 67px;
  width: 74px;
  height: 21px;
  display: flex;
  justify-content: space-between;
}

section .ul2 li .b2 .img1,
section .ul2 li .b4 .img1,
section .ul2 li .b6 .img1,
section .ul2 li .b8 .img1,
section .ul2 li .b10 .img1 {
  position: absolute;
  left: 0px;
  top: -5px;
  width: 21px;
  height: 21px;
  margin: 0;
  padding: 0;
}

.b2 .span3,
.b4 .span3,
.b6 .span3,
.b8 .span3,
.b10 .span3 {
  position: absolute;
  right: 0;
  top: 0;
  width: 21px;
  height: 21px;
  background: rgba(50, 177, 108, 1);
  border-radius: 50%;
}

section .ul2 li .b2 .img2,
section .ul2 li .b4 .img2,
section .ul2 li .b6 .img2,
section .ul2 li .b8 .img2,
section .ul2 li .b10 .img2 {
  position: absolute;
  right: 0;
  top: -5px;
  width: 21px;
  height: 21px;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.b2 .span1,
.b4 .span1,
.b6 .span1,
.b10 .span1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(218, 219, 222, 1);
  border-radius: 50%;
}

.b2 .span2,
.b4 .span2,
.b6 .span2,
.b8 .span2,
.b10 .span2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -80%);
  width: 4px;
  height: 10px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(44, 44, 47, 1);
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 375px;
  height: 45px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 0px 0px rgba(237, 237, 237, 1);
  z-index: 10;
}

footer img {
  position: absolute;
  left: 7px;
  bottom: 5px;
  width: 56px;
  height: 56px;
}

footer .span-1 {
  position: absolute;
  left: 46px;
  bottom: 42px;
  width: 17px;
  height: 17px;
  background: rgba(241, 145, 73, 1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

footer .div1 {
  position: absolute;
  left: 138px;
  top: 18px;
  width: 120px;
  height: 20px;
}

footer div .span1 {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}

footer div .span2 {
  font-size: 14px;
  font-weight: 400;
  color: #e85b4d;
}

footer .div2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 127px;
  height: 45px;
  background: rgba(50, 177, 108, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

/* 购物车页面 */
.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 375px;
  height: 217px;
  background: rgba(221, 221, 221, 0.8);
  display: block;
  z-index: 20;
}

.cart {
  display: block;
}

.cart .imgs-1 {
  position: absolute;
  left: 16px;
  top: 147px;
  width: 50px;
  height: 50px;
  z-index: 30;
}

.cart .span-1 {
  position: absolute;
  left: 54px;
  top: 146px;
  width: 17px;
  height: 17px;
  background: rgba(241, 145, 73, 1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

.cart .c {
  position: absolute;
  left: 0;
  top: 217px;
  width: 375px;
  height: 404px;
  padding-bottom: 60px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px 6px 0px 0px;
  display: flex;
  flex-direction: column;
  z-index: 5;
}

.c1 {
  /* position: absolute;
    left: 0;
    top: 0; */
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 375px;
  height: 44px;
}

.c1 .c1-imgs1 {
  margin-left: 13px;
  width: 18px;
  height: 18px;
}

.c1 .c1-span1 {
  margin-left: 15px;
  width: 25px;
  height: 11px;
  line-height: 11px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(37, 37, 37, 1);
}

.c1 .c1-span2 {
  margin-left: 8px;
  width: 70px;
  height: 12px;
  line-height: 12px;
  font-size: 11px;
  font-weight: 400;
  color: rgba(163, 165, 168, 1);
}

.c1 .c1-imgs2 {
  margin-left: 140px;
  width: 13px;
  height: 13px;
}

.c1 .c1-span3 {
  margin-left: 3px;
  width: 60px;
  height: 11px;
  line-height: 11px;
  font-size: 11px;
  font-weight: 400;
  color: rgba(163, 165, 168, 1);
}

.c2,
.c3,
.c4,
.c5 {
  position: relative;
  margin-top: 21px;
  width: 375px;
  height: 69px;
  display: flex;
  flex-direction: row;
}

.c2 {
  margin-top: 7px;
}

/* 第一列图 */
.c2-imgs1,
.c3-imgs1,
.c4-imgs1,
.c5-imgs1 {
  margin-left: 13px;
  margin-top: 26px;
  width: 18px;
  height: 18px;
}

/* 食品图 */
.c2-imgs2,
.c3-imgs2,
.c4-imgs2,
.c5-imgs2 {
  margin-left: 17px;
  margin-top: 0px;
  width: 69px;
  height: 69px;
}

/* 图右字 */
.c2-div1,
.c3-div1,
.c4-div1,
.c5-div1 {
  margin-left: 8px;
  margin-top: 4px;
  width: 100px;
  height: 39px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c2-span1,
.c3-span1.c4-span1.c5-span1 {
  margin-top: 4px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}

.c2-span2,
.c3-span2,
.c4-span2,
.c5-span2 {
  margin-top: 14px;
  font-size: 13px;
  font-weight: bold;
  color: rgba(232, 91, 77, 1);
}

/* 加减号 */
.c2-div2,
.c3-div2,
.c4-div2,
.c5-div2 {
  position: absolute;
  left: 294px;
  bottom: 0;
  width: 62px;
  height: 21px;
}

.c2-div2-span1,
.c3-div2-span1,
.c4-div2-span1,
.c5-div2-span1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(218, 219, 222, 1);
  border-radius: 50%;
}

/* 减号的横 */
.c2-div2-span2,
.c3-div2-span2,
.c4-div2-span2,
.c5-div2-span2 {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 12px;
  height: 2px;
  background: rgba(176, 176, 176, 1);
  border-radius: 1px;
  z-index: 10;
}

.c2-div2-span3,
.c3-div2-span3,
.c4-div2-span3,
.c5-div2-span3 {
  position: absolute;
  left: 28px;
  height: 5px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(44, 44, 47, 1);
  line-height: 20px;
}

/* 加号背景 */
.c2-div2-span4,
.c3-div2-span4,
.c4-div2-span4,
.c5-div2-span4 {
  position: absolute;
  right: 0;
  top: 0;
  width: 21px;
  height: 21px;
  background: rgba(50, 177, 108, 1);
  border-radius: 50%;
}

/* 十字的竖 */
.c2-div2-span5,
.c3-div2-span5,
.c4-div2-span5,
.c5-div2-span5 {
  position: absolute;
  left: 50px;
  bottom: 4px;
  width: 2px;
  height: 12px;
  background: rgba(255, 255, 255, 1);
  border-radius: 1px;
  z-index: 10;
}

/* 加号的横 */
.c2-div2-span6,
.c3-div2-span6,
.c4-div2-span6,
.c5-div2-span6 {
  position: absolute;
  left: 45px;
  top: 10px;
  width: 12px;
  height: 2px;
  background: rgba(255, 255, 255, 1);
  border-radius: 1px;
  z-index: 10;
}

.d {
  position: fixed;
  bottom: 0;
  background-color: white;
  width: 375px;
  height: 45px;
  z-index: 20;
}

.d-span1 {
  position: absolute;
  left: 10px;
  top: 17px;
  font-size: 14px;
  width: 50px;
  height: 13px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 13px;
}

.d-span2 {
  position: absolute;
  left: 50px;
  top: 17px;
  width: 50px;
  height: 13px;
  line-height: 13px;
  font-size: 14px;
  color: #e85b4d;
}

.d-span3 {
  position: absolute;
  right: 0;
  top: 0;
  width: 127px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  background: rgba(50, 177, 108, 1);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

.noCart {
  width: 100%;
  height: 100%;
  /* display: block; */
  flex-direction: column;
  align-items: center;
  background-color: #f6f6f6;
   position: absolute;
  left: 0;
  top: 217px;
  width: 375px;
  height: 404px;
  padding-bottom: 60px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px 6px 0px 0px;
  display: flex;
  flex-direction: column;
  z-index: 5;
}
.noCart.img1 {
  width: 142px;
  height: 142px;
}
.noCart.img {
  width: 142px;
  height: 142px;
  margin-top: 121px;
}
.noCart.text1 p {
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(66, 66, 66, 1);
  margin-top: 19px;
}
.noCart.text2 p {
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgb(133, 124, 124);
  line-height: 18px;
  opacity: 0.7;
  margin-top: 14px;
  margin-bottom: 243px;
}
</style>
